import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import FilledInput from '@material-ui/core/FilledInput';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles(theme => ({
    container: {
        display: 'flex',
        flexWrap: 'wrap',
    },
    formControl: {
        margin: theme.spacing(1),
    },
    button:{
        width:182,
    }
}));

export default function ComposedTextField() {
    const classes = useStyles();
    const [params, setParams] = React.useState({
        oldPassword:'',
        newPassword:'',
        repeatNewPassword:'',
    });

    

    function handleChange(event,key) {
        setParams({...params,[key]:event.target.value});
    }

    function submit(){
        console.log(params)
    }

    return (
        <div>
            <div>
                <FormControl className={classes.formControl}>
                    <InputLabel htmlFor="component-simple">原密码</InputLabel>
                    <Input id="component-simple" value={params.oldPassword} onChange={(event) => (handleChange(event,'oldPassword'))} />
                </FormControl>
            </div>
            <div>
                <FormControl className={classes.formControl}>
                    <InputLabel htmlFor="component-simple">新密码</InputLabel>
                    <Input id="component-simple" value={params.newPassword} onChange={(event) => (handleChange(event,'newPassword'))} />
                </FormControl>
            </div>
            <div>
                <FormControl className={classes.formControl}>
                    <InputLabel htmlFor="component-simple">重复新密码</InputLabel>
                    <Input id="component-simple" value={params.repeatNewPassword} onChange={(event) => (handleChange(event,'repeatNewPassword'))} />
                </FormControl>
            </div>
            <div>
                <FormControl className={classes.formControl}>
                    <Button variant="outlined" className={classes.button} onClick={submit}>
                        确定
                    </Button>
                </FormControl>
            </div>
        </div>
    );
}
